/** 导航页开始 **/
.nav
{
    position: relative;
    height: 76px;
    background-color: #FFF;
    width: 100%;
    z-index: 2000;
    /*给盒子设置阴影*/
    box-shadow: 100px 0px 100px rgba(0, 0, 0, 0.3);
}

.nav ul li{
    /*因为li是块级元素，所以要给它转换*/
    display: inline-block;
    /*垂直向上对齐*/
    vertical-align: top;
    height: 76px;
}
/*给a标签设置内边距 保证鼠标移动到下拉菜单框光标不会是手指*/
.nav ul li a.n_link strong{
    font-weight: bold;
    padding: 24px 24px;
}
.nav ul li.hasmore{
    background: url("../image/daohangjiantou.gif")right center no-repeat;
}
.nav ul li a.n_link{
    /*设定a标签内边距*/
    height: 76px;
    /*设置行高*/
    line-height: 76px;
    font-size: 18px;
    color: #444 ;
    font-family: Microsoft Yahei,黑体;
    position: relative;
}

/*使用JS效果实现鼠标事件添加class*/
.nav ul li.on{
    background: #fafafa;
}
.nav ul li.on .dropdown{
    display: block;
    
}
.navs ul li.on{
    background: #fafafa;
    border-bottom: 4px solid red;
}
/*使用JS效果实现鼠标事件添加class*/


.nav ul li .dropdown{
    /*
    下拉框大盒子使用绝对定位
    宽度百分百
    距离父元素左边0px
    距离父元素上边76px
    */
    position: absolute;
    left: 0px;
    top: 76px;
    width: 100%;
    display: none;
}
/*设置下拉框大框的样式*/
.nav ul li .dropdown .ddropdown{
    /*内框盒子使用相对定位*/
    position: relative;
    width: 930px;
    /*设置外边距并且让它居中*/
    margin: 0px auto;
    background: #fafafa;
    /*设置阴影*/
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
    /*设置内边距上为18、左右为30、下为24*/
    padding: 18px 30px 24px;
}

/*下拉框里边内框盒子的布局*/
.nav ul li .dropdown .ddropdown .dropdownitem{
    /*转换为行内块元素*/
    display: inline-block;
    /*只有转换为行内块才能实现顶部对齐的布局方式*/
    vertical-align: top;
    /*  
        超出的部分隐藏 
        比如有得宽度过多直接遮盖主后面的图片
    */
    overflow: hidden;
    /*
        因为它的父元素是相对布局，如果子元素过多放不下会自动换行
        所以要给它设置不换行的样式->white-space: nowrap
    */
    white-space: nowrap;
    /*设置内边距的  右边距、和下边距*/
    padding: 0px 10px 12px 0px;
}

/* .nav里边的两个下俩框共用一个样式*/

/*设置下拉框内框各个盒子里面的dt的属性*/
.nav ul li .dropdown .ddropdown .dropdownitem  dl dt{
    /*设置dt的属性为可见*/
    display: block;
    /*设置dt高度为24*/
    height: 24px;
    /*设置dt宽度68*/
    width: 68px;
    /*设置dt行高24*/
    line-height: 24px;
}
/*设置下拉框内框各个盒子里面的dt的a标签属性*/
.nav ul li .dropdown .ddropdown .dropdownitem  dl dt a{
    color: #ff3232;
    /*设置dt的a标签里的字体大小*/
    font-size: 17px;
    /*dt的a标签里的字体加粗*/
    font-weight: bold;
    /*设置dt的a标签里的字体型号*/
    font-family: Microsoft Yahei,黑体;
    /*由原来的样式转换为当前选择器里的样式需要0.2秒的时间*/
    transition: 0.2s;
}
/*设置下拉框内框各个盒子里面的dd的属性*/
.nav ul li .dropdown .ddropdown .dropdownitem  dl dd{
    /* 转换为行内块元素*/
    display: inline-block;
    /*设置顶部对齐的属性*/
    vertical-align: top;
    /*高度*/
    height: 24px;
    /*行高*/
    line-height: 24px;
    /*内部右边距*/
    padding-right: 14px;
}
/*设置下拉框内框各个盒子里面dd的a标签属性*/
.nav ul li .dropdown .ddropdown .dropdownitem  dl dd a{
    color: #999;
    font-size: 12px;
    /*由原来的样式转换为当前选择器里的样式需要0.2秒的时间*/
    transition: 0.2s;
}
/*设置下拉框内框的宽度 第一个不设置是因为他本身就占满一行了*/
.nav ul li .dropdown .ddropdown .dropdownitem_half{
    width: 350px;
}
/*给下拉框右下角设置背景图片*/
.nav ul li .dropdown .bgphoto_pangxie .bgitem{
    /*设置绝对定位，所以它的父元素应该是相对定位*/
    position: absolute;
    background: url("../image/pangxie.png")right bottom no-repeat;
    right: -60px;
    bottom: -30px;
    height: 226px;
    width: 404px;
}
/*给下拉框右下角设置背景图片*/
.nav ul li .dropdown .bgphoto_shicai .bgitem{
    position: absolute;
    background: url("../image/shicai.png")right bottom no-repeat;
    right: -60px;
    bottom: -30px;
    height: 208px;
    width: 325px;
}

/** 伪类 **/
/*当鼠标指向定义列表dd里面的a标签时更改背景颜色和*/
.nav ul li .dropdown .ddropdown .dropdownitem  dl dt a:hover{
    background: red;
    color: white;
} 
/*当鼠标指向定义列表dd里面的a标签时更改背景颜色和*/
.nav ul li .dropdown .ddropdown .dropdownitem  dl dd a:hover{
    background-color: red;
    color: white;
}
/** 伪类 **/
/** 导航页结束 **/

/** 中间大盒子区域Begin **/
.main{
    width: 100%;
    background: url("../image/bg.png")no-repeat 50% 300px;
}
/*轮播区域Begin*/
/*食物索引播放区域*/
.main .index_food{
    height: 382px;
    position: relative;
    margin-top: 134px;
}
/*食物索引播放长区域*/
.main .index_food .index_food_long{
    position: absolute;
    width: 5000px;
    height: 330px;
    left: -1980px;
}
/*食物展示公用盒子(里边存放三个食物图片)*/
.main .index_food .index_food_long .food_item{
    width: 990px;
    height: 330px;
    position: absolute;
}

/*四个食物盒子的类名随着区域的变化而变化 1*/
.main .index_food .index_food_long .food_item_1{
    left: 0px;
    top: 0px;
}
/*四个食物盒子的类名随着区域的变化而变化 2*/
.main .index_food .index_food_long .food_item_2{
    left: 990px;
    top: 0px;
}
/*四个食物盒子的类名随着区域的变化而变化 3*/
.main .index_food .index_food_long .food_item_3{
    left: 1980px;
    top: 0px;
}
/*四个食物盒子的类名随着区域的变化而变化 4*/
.main .index_food .index_food_long .food_item_4{
    left: 2970px;
    top: 0px;
}
/*四个食物盒子的类名随着区域的变化而变化 5*/
.main .index_food .index_food_long .food_item_5{
    left: 3960px;
    top: 0px;
} 
/*食物展示盒子里li的样式*/
.main .food_item li{
    float: left;
    width: 330px;
    height: 330px;
    overflow: hidden;
    position: relative;
}
/*食物展示盒子里li标签下的a标签填满li*/
.main .food_item li a.img{
    width: 330px;
    height: 330px;
    display: block;
}
/*食物展示盒子里li标签下的a标签下的img图片填满a标签*/
.main .food_item li a.img img{
    width: 330px;
    height: 330px;
    display: block;
}
/*食物展示盒子图片下的文字介绍*/
.main .food_item li div{
    position: absolute;
    height: 78px;
    width: 330px;
    left: 0px;
    bottom: 0px;
    background: url("../image/baidian.png") repeat;
}
/*食物展示盒子li下的div盒子里的strong标签的行高字体颜色还有内边距*/
.main .food_item li div strong{
    line-height: 18px;
    color: #666;
    padding-left: 20px;
}
.main .food_item li div h2{
    height: 36px;
    line-height: 36px;
    padding-top: 12px;
    text-indent: 20px;
}
.main .food_item li div h2 a{
    color: #333;
    font-size: 24px;
    font-family: Microsoft Yahei;
}
/*食物索引区域两边的白色透明遮盖物*/
.main .maskleft{
    height: 330px;
    width: 990px;
    position: absolute;
    left: -990px;
    top: 0px;
    display: block;
    background: #fff;
    opacity: 0.7;
    z-index: 100;
}
.main .maskright{
    height: 330px;
    width: 990px;
    position: absolute;
    left: 990px;
    top: 0px;
    display: block;
    background: #fff;
    opacity: 0.7;
    z-index: 100;
}
/*食物索引底部区域*/
.main .index_food .index_bottom{
    width: 100%;
    height: 52px;
    position: absolute;
    left: 0px;
    top: 330px;
}
/*食物索引底部区域内部盒子*/
.main .index_bottom .index_bottom_tab{
    height: 52px;
    position: relative;
    overflow: hidden;
    background:#fff url("../image/kedu.gif")0px 0px repeat-x;
}

.main .index_bottom_tab .times{
    display: block;
    width: 198px;
    float: left;
    height: 48px;
    line-height: 48px;
    color: #999;
    font-size: 14px;
    text-align: center;
    border-top: 4px solid #aaa;
    position: relative;
}
/*底部索引区域内部盒子左旁*/
.main .index_bottom .timeline_left{
    width: 1000px;
    position:absolute;
    left: -1000px;
    top: 0px;
    height: 48px;
    border-top: 4px solid #aaa;
    background:#fff url("../image/kedu.gif") repeat-x;
}
/*底部索引区域内部盒子右旁*/
.main .index_bottom .timeline_right{
    position: absolute;
    width: 1000px;
    right: -1000px;
    top: 0px;
    height: 48px;
    border-top: 4px solid #aaa;
    /* 设置背景图片平铺x轴 并设置当前元素的背景颜色*/
    background:#fff url("../image/kedu.gif")repeat-x;
}
/*设置span里的字体为不显示，以助后边鼠标指到指定区域才让他显示*/
.main .index_bottom_tab .times span{
    display: none;
}
/*根据图片位置更改当前元素内的样式*/
.main .index_bottom_tab .topn{
    border-top: 4px solid #ff6363;
    color: #ff6363;
    background: #f9f9f9 url("../image/kedu.gif") 0px -4px no-repeat;
    font-weight: bold;
}
/*当鼠标选中当前span标签，就让字体显示出来*/
.main .index_bottom_tab .topn span{
    display: block;
}
/*当鼠标指到指定的区域时 当前样式进行改变*/

/*时间段*/
.main .index_bottom .timezone{
    display: block;
    height: 48px;
    line-height: 48px;
    width: 60px;
    position: absolute;
    top: 4px;
    font-size: 18px;
    color: #aaa;
    font-family: Arial;
}
.TimeFour{
    left: -11px;
}
.TimeTen{
    left: 176px;
}
.TimeFourteen{
    left: 375px;
}
.TimeSixteen{
    left: 573px;
}
.TimeTwenty-one{
    left: 771px;
}
.TimeFour_{
    left: 979px;
}
/*显示是早餐还是午餐还是下午茶区块*/
.main .index_food .prev_btn{
    display: block;
    height: 73px;
    width: 173px;
    position: absolute;
    left: -60px;
    background: url("../image/foodphoto.png")no-repeat;
    top: 128px;
    z-index: 500;
}
.main .index_food .nextpage_btn{
    display: block;
    height: 73px;
    width: 173px;
    position: absolute;
    right: -60px;
    background: url("../image/foodphoto.png")no-repeat;
    top: 128px;
    z-index: 500;
}
/*轮播区域END*/


/** 中间大盒子区域END **/









